@(questionForm: Form[models.data.Spurningar],courses: List[models.general.vKennariHoparOnn], multiChoiceForm: Form[models.data.Svor],
tagList: List[data.Leitarskilyrdi],bookList: List[models.general.StringIntegerClass], verkefniId : Int)

@teacherMain(title = "Ný spurning") {


    <script src="/public/javascripts/createQuestion.js"></script>


    <div class="container conLower">
        <div class="row">
            <div class="span12">
                <div class ="tabbable tabs-left">
                    <ul class="nav nav-tabs">
                        <li class ="active dashStaerri"> <a href ="#tab1" data-toggle="tab"> Textaspurning</a> </li>
                        <li> <a href ="#tab2" class="dashStaerri" data-toggle="tab"> Krossaspurning </a> </li>
                        <li> <a href ="#tab3" class="dashStaerri" data-toggle="tab"> Fjölvalsspurning </a> </li>
                        <li> <a href ="#tab4" class="dashStaerri" data-toggle="tab"> Eyðufyllingarspurning </a> </li>
                        <li> <a href ="#tab5" class="dashStaerri" data-toggle="tab"> Myndaspurning</a> </li>
                        <li> <a href ="#tab6" class="dashStaerri" data-toggle="tab">Viðhengi </a> </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab1">
                            <h2> Textaspurning </h2>

                            @helper.form(action = routes.TeacherController.validateQuestion(verkefniId), 'class -> "form-horizontal") {
                                <fieldset>

                                    <input type ="hidden" name ="tegund" value = "texti">


                                    <datalist id="leitarskilyrdiList">
                                        @for(singleTag <- tagList){
                                            <option value= @{
                                                singleTag.leitarskilyrdi
                                            }/>
                                        }
                                    </datalist>

                                    <div class="control-group">
                                        <label class="control-label"> Áfangi </label>
                                        <div class="controls">
                                            <select class="span6" name="afangi_id">
                                                @for(course <- courses){
                                                    <option value=@{course.afangi_id}>@{course.namsgrein_afanganr}</option>
                                                }
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label"> Bók </label>
                                        <div class="controls">
                                            <select class="span6" name="bok_id">
                                                <option value="noBook">Spurning ekki úr bók</option>
                                                @for(singleBook <- bookList){
                                                    <option value=@{singleBook.index}>@singleBook.bookName</option>
                                                }
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label"> Þyngdarstig spurningar </label>
                                        <div class="controls">
                                            <select id ="weightOfQuestion" name="tyngdarstig" class="span6">
                                                <option value="1"> Létt </option>
                                                <option value="2"> Miðlungs </option>
                                                <option value="3"> Erfið </option>
                                            </select>
                                        </div>
                                    </div>



                                    <div class="control-group">
                                        <label class="control-label"> Texti spurningar </label>
                                        <div class="controls">
                                            <textarea name= "texti" class="span6" placeholder="Spurningin þín kemur hingað"></textarea>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leitarskilyrði auðvelda þér leitina að spurningum við gerð verkefna og prófa</p>
                                        <div class="controls">
                                            <button class="btn btn-small" type="button" onclick="addTextTag()">Bæta við leitarskilyrði</button>&nbsp;
                                            <button class="btn btn-small" type="button" onclick="removeTextTag()">Fjarlægja leitarskilyrði</button>&nbsp;
                                        </div>
                                    </div>

                                    <div class="control-group" >
                                        <div class="controls">
                                            <div id="textTagBar">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <div class="form-actions">
                                            <button type="submit" class="btn btn-primary" value="submit">Búa til spurningu</button>
                                            <a href="@routes.TeacherController.questionBank()"> <input type="button" class="btn" value="Hætta við" title="Fara í spurningabanka" /> </a>
                                        </div>
                                    </div>
                                </fieldset>
                            } <!--end of helper -->
                        </div>

                        <div class ="tab-pane" id="tab2">

                            <h2>Krossaspurning</h2>

                            @helper.form(action = routes.TeacherController.saveSingleChoice(verkefniId), 'class -> "form-horizontal") {
                                <fieldset>

                                    <input type ="hidden" name ="tegund" value = "krossar">

                                    <div class="control-group">
                                        <label class="control-label"> Áfangi </label>
                                        <div class="controls">
                                            <select class="span6" name="afangi_id">
                                                @for(course <- courses){
                                                    <option value=@{course.afangi_id}>@{course.namsgrein_afanganr}</option>
                                                }
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label"> Bók </label>
                                        <div class="controls">
                                            <select class="span6" name="bok_id">
                                                <option value="noBook">Spurning ekki úr bók</option>
                                                @for(singleBook <- bookList){
                                                    <option value=@{singleBook.index}>@singleBook.bookName</option>
                                                }
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label">Þyngdarstig spurningar</label>
                                        <div class="controls">
                                            <select id = "weightOfQuestion" name="tyngdarstig" class="span6">
                                                <option value="1">Létt</option>
                                                <option value="2">Miðlungs</option>
                                                <option value="3">Erfið</option>
                                            </select>
                                        </div>
                                    </div>



                                    <div class="control-group">
                                        <label class="control-label">Texti spurningar</label>
                                        <div class="controls">
                                            <textarea type="text" name= "texti" class="span6" placeholder="Spurningin þín kemur hingað"></textarea>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <div class="controls">
                                            <button class="btn btn-small" type="button" onclick="addNewKrossOption()">Bæta við svarmöguleika</button>&nbsp;
                                            <button class="btn btn-small" type="button" onclick="removeKrossOption()">Fjarlægja svarmöguleika</button>&nbsp;
                                        </div>
                                    </div>


                                    <div class="control-group" >
                                        <label class="control-label">Svarmöguleikar</label>
                                        <div class="controls">
                                            <input type="text" name="svor_texti" class="span6" placeholder="Sláðu inn hið eina rétta svar...">
                                            <br><br>

                                            <div id= "krossOptions">
                                            </div>

                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leitarskilyrði auðvelda þér leitina að spurningum við gerð verkefna og prófa</p>
                                        <div class="controls">
                                            <button class="btn btn-small" type="button" onclick="addKrossTag()">Bæta við leitarskilyrði</button>&nbsp;
                                            <button class="btn btn-small" type="button" onclick="removeKrossTag()">Fjarlægja leitarskilyrði</button>&nbsp;
                                        </div>
                                    </div>

                                    <div class="control-group" >
                                        <div class="controls">
                                            <div id= "krossTagBar">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <div class="form-actions">
                                            <button type="submit" class="btn btn-primary" value="submit">Búa til spurningu</button>
                                            <a href="@routes.TeacherController.questionBank()"> <input type="button" class="btn" value="Hætta við" title="Fara í spurningabanka" /> </a>
                                        </div>
                                    </div>
                                </fieldset>

                            } <!--end of helper -->



                        </div>
                        <div class="tab-pane" id="tab3">

                            <h2>Fjölvalsspurning</h2>

                            @helper.form(action = routes.TeacherController.saveMultiChoice(verkefniId), 'class -> "form-horizontal") {
                                <fieldset>

                                    <input type ="hidden" name ="tegund" value = "fjolval">


                                    <div class="control-group">
                                        <label class="control-label"> Áfangi </label>
                                        <div class="controls">
                                            <select class="span6" name="afangi_id">
                                                @for(course <- courses){
                                                    <option value=@{course.afangi_id}>@{course.namsgrein_afanganr}</option>
                                                }
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label"> Bók </label>
                                        <div class="controls">
                                            <select class="span6" name="bok_id">
                                                <option value="noBook">Spurning ekki úr bók</option>
                                                @for(singleBook <- bookList){
                                                    <option value=@{singleBook.index}>@singleBook.bookName</option>
                                                }
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label">Þyngdarstig spurningar</label>
                                        <div class="controls">
                                            <select id = "weightOfQuestion" name="tyngdarstig" class="span6">
                                                <option value="1">Létt</option>
                                                <option value="2">Miðlungs</option>
                                                <option value="3">Erfið</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label">Texti spurningar</label>
                                        <div class="controls">
                                            <textarea type="text" name="texti" class="span6" placeholder="Spurningin þín kemur hingað"> </textarea>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <div class="controls">
                                            <button class="btn btn-small" type="button" onclick="addNewFjolvalOption()">Bæta við svarmöguleika</button>&nbsp;
                                            <button class="btn btn-small" type="button" onclick="removeFjolvalOption()">Fjarlægja svarmöguleika</button>&nbsp;
                                        </div>
                                    </div>

                                    <div id="answers" class="control-group" >
                                        <label class="control-label">Svarmöguleikar</label>
                                        <div class="controls">
                                            <input type="text" name="svor_texti" class="span6" placeholder="Svarmöguleiki">
                                            <select name="rettsvar">
                                                <option value="rett">Rétt svar</option>
                                                <option value="rangt">Rangt svar</option>
                                            </select>
                                            <br><br>
                                            <div id="fjolvalOptions"></div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leitarskilyrði auðvelda þér leitina að spurningum við gerð verkefna og prófa</p>
                                        <div class="controls">
                                            <button class="btn btn-small" type="button" onclick="addFjolvalTag()">Bæta við leitarskilyrði</button>&nbsp;
                                            <button class="btn btn-small" type="button" onclick="removeFjolvalTag()">Fjarlægja leitarskilyrði</button>&nbsp;
                                        </div>
                                    </div>

                                    <div class="control-group" >
                                        <div class="controls">
                                            <div id= "fjolvalTagBar">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <div class="form-actions">
                                            <button type="submit" class="btn btn-primary" value="submit">Búa til spurningu</button>
                                            <a href="@routes.TeacherController.questionBank()"> <input type="button" class="btn" value="Hætta við" title="Fara í spurningabanka" /> </a>
                                        </div>
                                    </div>
                                </fieldset>

                            } <!--end of helper -->

                        </div>
                        <div class="tab-pane" id="tab4">
                            <h2>Eyðufyllingarspurning</h2>

                                @helper.form(action = routes.TeacherController.submitEydufylling(verkefniId), 'class -> "form-horizontal") {
                                    <fieldset>

                                        <input type ="hidden" name ="tegund" value = "eydufylling">
                                        <div class="control-group">
                                            <label class="control-label"> Áfangi </label>
                                            <div class="controls">
                                                <select class="span6" name="afangi_id">
                                                    @for(course <- courses){
                                                        <option value=@{course.afangi_id}>@{course.namsgrein_afanganr}</option>
                                                    }
                                                </select>
                                            </div>
                                        </div>

                                        <div class="control-group">
                                            <label class="control-label"> Bók </label>
                                            <div class="controls">
                                                <select class="span6" name="bok_id">
                                                    <option value="noBook">Spurning ekki úr bók</option>
                                                    @for(singleBook <- bookList){
                                                        <option value=@{singleBook.index}>@singleBook.bookName</option>
                                                    }
                                                </select>
                                            </div>
                                        </div>

                                        <div class="control-group">
                                            <label class="control-label">Þyngdarstig spurningar</label>
                                            <div class="controls">
                                                <select id = "weightOfQuestion" name="tyngdarstig" class="span6">
                                                    <option value="1">Létt</option>
                                                    <option value="2">Miðlungs</option>
                                                    <option value="3">Erfið</option>
                                                </select>
                                            </div>
                                        </div>


                                    <div class="control-group">
                                        <p> Sláðu inn lýsingu á eyðufyllingunni og möguleg svör </p>
                                        <div class="controls">
                                            <textarea name="eyduLysing" class ="span6" placeholder="Lýsing á eyðufyllingu og möguleg svör"></textarea>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <p>Sláðu inn texta með <b> ;</b> þar sem orðið sem vantar á að fara</p>
                                        <div class="controls">
                                            <textarea name= "texti" class="span6" placeholder="Spurningin þín kemur hingað"></textarea>
                                        </div>
                                    </div>

                                        <div class="control-group">
                                            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leitarskilyrði auðvelda þér leitina að spurningum við gerð verkefna og prófa</p>
                                            <div class="controls">
                                                <button class="btn btn-small" type="button" onclick="addEydufyllingTag()">Bæta við leitarskilyrði</button>&nbsp;
                                                <button class="btn btn-small" type="button" onclick="removeEydufyllingTag()">Fjarlægja leitarskilyrði</button>&nbsp;
                                            </div>
                                        </div>

                                        <div class="control-group" >
                                            <div class="controls">
                                                <div id= "eydufyllingTagBar">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="control-group">
                                            <div class="form-actions">
                                                <button type="submit" class="btn btn-primary" value="submit">Búa til spurningu</button>
                                                <a href="@routes.TeacherController.questionBank()"> <input type="button" class="btn" value="Hætta við" title="Fara í spurningabanka" /> </a>
                                            </div>
                                        </div>
                                </fieldset>
                            }

                        </div>

                        <div class="tab-pane" id="tab5">
                            @helper.form(action = routes.TeacherController.submitPicture(verkefniId), 'enctype -> "multipart/form-data", 'class -> "form-horizontal") {
                            <h2>Myndaspurning</h2>
                                <fieldset>

                                    <input type ="hidden" name ="tegund" value = "mynd">

                                    <div class="control-group">
                                        <label class="control-label"> Áfangi </label>
                                        <div class="controls">
                                            <select class="span6" name="afangi_id">
                                                @for(course <- courses){
                                                    <option value=@{course.afangi_id}>@{course.namsgrein_afanganr}</option>
                                                }
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label"> Bók </label>
                                        <div class="controls">
                                            <select class="span6" name="bok_id">
                                                <option value="noBook">Spurning ekki úr bók</option>
                                                @for(singleBook <- bookList){
                                                    <option value=@{singleBook.index}>@singleBook.bookName</option>
                                                }
                                            </select>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label">Þyngdarstig spurningar</label>
                                        <div class="controls">
                                            <select id = "weightOfQuestion" name="tyngdarstig" class="span6">
                                                <option value="1">Létt</option>
                                                <option value="2">Miðlungs</option>
                                                <option value="3">Erfið</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="control-group">
                                        <label class="control-label">Texti við mynd:</label>
                                        <div class="controls">
                                            <textarea name= "texti" class="span6"" placeholder="Settu spurninguna við myndina hérna"> </textarea>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <label class="control-label">Viðhengi</label>
                                        <div class="controls">
                                            <input type="file" name="vidhengi">
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leitarskilyrði auðvelda þér leitina að spurningum við gerð verkefna og prófa</p>
                                        <div class="controls">
                                            <button class="btn btn-small" type="button" onclick="addMyndTag()">Bæta við leitarskilyrði</button>&nbsp;
                                            <button class="btn btn-small" type="button" onclick="removeMyndTag()">Fjarlægja leitarskilyrði</button>&nbsp;
                                        </div>
                                    </div>

                                    <div class="control-group" >
                                        <div class="controls">
                                            <div id= "myndTagBar">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="control-group">
                                        <div class="form-actions">
                                            <button type="submit" class="btn btn-primary" value="submit">Búa til spurningu</button>
                                            <a href="@routes.TeacherController.questionBank()"> <input type="button" class="btn" value="Hætta við" title="Fara í spurningabanka" /> </a>
                                        </div>
                                    </div>
                                    </fieldset>
                            }
                        </div> <!--end of tab 5-->

                        <div class="tab-pane" id="tab6">
                            <h2> Viðhengi </h2>

                            @helper.form(action = routes.TeacherController.addVidhengiQuestion(verkefniId),'enctype -> "multipart/form-data", 'class -> "form-horizontal") {
                            <fieldset>

                                <input type ="hidden" name ="tegund" value = "vidhengi">

                                <div class="control-group">
                                    <label class="control-label"> Áfangi </label>
                                    <div class="controls">
                                        <select class="span6" name="afangi_id">
                                            @for(course <- courses){
                                                <option value=@{course.afangi_id}>@{course.namsgrein_afanganr}</option>
                                            }
                                        </select>
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label class="control-label"> Bók </label>
                                    <div class="controls">
                                        <select class="span6" name="bok_id">
                                            <option value="noBook">Spurning ekki úr bók</option>
                                            @for(singleBook <- bookList){
                                                <option value=@{singleBook.index}>@singleBook.bookName</option>
                                            }
                                        </select>
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label class="control-label"> Viðhengi </label>
                                    <div class="controls">
                                        <input type="file" name="vidhengi">
                                    </div>
                                </div>

                                <div class="control-group">
                                    <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Leitarskilyrði auðvelda þér leitina að spurningum við gerð verkefna og prófa</p>
                                    <div class="controls">
                                        <button class="btn btn-small" type="button" onclick="addVidhengiTag()">Bæta við leitarskilyrði</button>&nbsp;
                                        <button class="btn btn-small" type="button" onclick="removeVidhengiTag()">Fjarlægja leitarskilyrði</button>&nbsp;
                                    </div>
                                </div>

                                <div class="control-group" >
                                    <div class="controls">
                                        <div id="vidhengiTagBar">
                                        </div>
                                    </div>
                                </div>

                                <div class="control-group">
                                    <div class="form-actions">
                                        <button type="submit" class="btn btn-primary" value="submit">Búa til spurningu</button>
                                        <a href="@routes.TeacherController.questionBank()"> <input type="button" class="btn" value="Hætta við" title="Fara í spurningabanka" /> </a>
                                    </div>
                                </div>
                            </fieldset>
                            } <!--end of helper -->
                        </div>  <!--end of tab6-->

                    </div>
                </div>
            </div> <!--end of span6 in the beginning -->
        </div> <!--div class row -->
    </div> <!-- /container -->


    <!-- select prettifier -->
    <link rel="stylesheet" href="/public/stylesheets/bootstrap-selects/bootstrap-select.css">
    <script src="/public/javascripts/bootstrap-selects/bootstrap-select.js"></script>
    <script type="text/javascript">
            window.onload=function(){
            $('.selectpicker').selectpicker();
            };
    </script>
}
